我们已经编写了一个非常简单的示例网站（观看我们的在线演示，并查看源代码），该网站虽然功能不多，但是实现 A2HS 所必须的代码都有包含，Service Worker 也使其可以脱机使用。这个示例展示了一系列的狐狸图片。

如果您有适用于 Android 的 Firefox，使用它打开我们的示例：https://mdn.github.io/pwa-examples/a2hs/。你将会看到狐狸图片，但更重要的是，你将会看到一个带有加号（+）的“主页”图标——这是为具有必要功能的任何站点显示的“添加到主屏幕”图标。

点击此按钮将显示一个确认横幅，按下大大的“添加到主屏幕”按钮即可将应用添加到主屏幕。（注意：在 Android 8 及更高版本中，将首先显示系统级的“添加到主屏幕”权限对话框。）

使用 Mobile Chrome 的体验则略有不同；加载我们的网站后，您会看到一个弹出安装横幅，询问您是否要将此应用添加到主屏幕。

备注： 您可以在“Web App 安装横幅”一文中找到有关 Chrome 安装横幅的更多信息。

如果您选择不将其添加到主屏幕，则可以稍后使用 Chrome 主菜单中的添加到主屏幕图标添加。

无论使用哪种浏览器，当您选择将应用程序添加到主屏幕时，您都会看到它与短标题一起出现，就像原生应用程序一样。

点按此图标可以将其打开，但是作为全屏应用程序，您将不再看到其周围的浏览器用户界面。